<template>
	<view class="my-add-path">
		<view class="path-item">
			<view class="item-title">收 件 人</view>
			<input type="text" value="" placeholder="收件人姓名" v-model="pathObj.name"/>
		</view>
		<view class="path-item">
			<view class="item-title">手 机 号</view>
			<input type="text" value="" placeholder="11位手机号" v-model="pathObj.tel"/>
		</view>
		<view class="path-item">
			<view class="item-title">所在地区</view>
			<view @tap="showCityPicker">{{pathObj.city}}</view>
			<mpvue-city-picker ref="mpvueCityPicker" :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
		<view class="path-item">
			<view class="item-title">详细地址</view>
			<input type="text" value="" placeholder="小区楼栋/乡村名称" v-model="pathObj.details"/>
		</view>
		<view class="path-item" >
			<view class="item-title" :checked="pathObj.isDefault">设为默认地址</view>
			<label class="radio">
				<radio value="" color="#ff3333"/><text></text>
			</label>
		</view>
	</view>
</template>

<script>
	import {mapActions} from "vuex"
	import mpvueCityPicker from "@/components/uui/mpvue-citypicker/mpvueCityPicker.vue"
	export default {
		components:{
			mpvueCityPicker
		},
		data() {
			return {
				pathObj:{
					name:"",
					tel:"",
					city:"请选择",
					details:"",
					isDefault:false
				},
				
				pickerValueDefault:[0, 0, 1]
			}
		},
		computed:{
			
		},
		onNavigationBarButtonTap() {
			this.createPathFn(this.pathObj)
			uni.navigateBack({
				delta:1
			})
		},
		methods: {
			showCityPicker(){
				this.$refs.mpvueCityPicker.show()
			},
			onConfirm(e){
				console.log();
				this.city = e.label
			},
			...mapActions(["createPathFn"])
		}
	}
</script>

<style scoped>
.my-add-path{
	padding-left: 20rpx;
}
.path-item{
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 32rpx 0 ;
	width: 100%;
	border-bottom: 2rpx solid #cccccc;
}
.path-item input{
	flex: 1;
	text-align: left;
	padding-left: 10rpx;
}
.item-title{
	margin-right: 20rpx;
}
</style>
